<template>
    <div class="video-popularize-award">
        <c-title :text="title"></c-title>
        <div class="bg-linear"></div>
        <div class="head">
            <img :src="member_info.avatar" alt="">
            <div class="head-right">
                <div class="nick-name">{{member_info.nickname}}</div>
                <div class="level">{{member_info.level_name}}</div>
            </div>
        </div>
        <div class="tips-box">
            <div>
                <div class="number">{{member_info.count_reward}}</div>
                <div class="text-css">奖励次数</div>
            </div>
            <div>
                <div class="number">{{ $i18n.t('money') }}{{member_info.reward_price}}</div>
                <div class="text-css">奖励金额</div>
            </div>
        </div>
        <div class="title">购买记录</div>
        <div class="list">
            <template v-if="list && list.length !== 0">
                <div class="list-item" v-for="item in list" :key="item.id" @click="goto(item)">
                    <div class="flex-a-c flex-j-sb">
                        <div class="item-title">{{item.goods_title}}</div>
                        <div class="detail">查看权益<i class="iconfont icon-icon_more11"></i></div>
                    </div>
                    <div class="line"></div>
                    <div class="item-text">商品总价：{{ $i18n.t('money') }}{{ item.goods_price }}</div>
                    <div class="item-text">订单编号：{{ item.order_sn }}</div>
                    <div class="item-text">完成时间：{{ item.finish_time }}</div>
                </div>
            </template>
            <template v-else>
                <div class="no-buy">
                    <div>
                        <img :src="no_buy" alt="">
                        <div class="text">暂无购买记录</div>
                    </div>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
import { scrollMixin } from '../../utils/mixin';


export default {
    mixins: [scrollMixin],
    data() {
        return {
            no_buy:window.location.origin+'/static/local/video-promotion-rewards/no-buy.png',
            member_info: {},
            list: [],
            page: 1,
            total_page: 1,
            isLoadMore: true,
            title:"",
        };
    },
    activated() {
        this.isLoadMore = true;
        this.getData();

    },
    methods: {
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) {
                return;
            }
            let page = this.page + 1;
            this.getData(page);
        },
        getData(page = 1) {
            $http.post("plugin.video-promotion-rewards.frontend.income.getInfo", { page }, ".").then(res => {
                if (res.result) {
                    console.log(res.data);
                    let data = res.data;
                    this.member_info = data.member_info
                    this.list = page == 1 ? data.list.data:this.list.concat(data.list.data);
                    this.page = data.list.current_page;
                    if(this.title==''){
                        this.title = res?.basic_info?.plugin_setting?.video_promotion_rewards?.plugin_name;
                        this.fun.setWXTitle(res?.basic_info?.plugin_setting?.video_promotion_rewards?.plugin_name);
                    }
                    this.total_page = data.list.last_page;
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        goto(data) {
            this.$router.push(this.fun.getUrl("video_popularize_award_details",{id:data.id},{}))
        }
    }
};
</script>

<style scoped lang='scss'>
::v-deep .van-nav-bar .van-icon {
    color: #fff !important;
}

::v-deep .van-button--default {
    background-color: var(--themeBaseColor);

}

::v-deep .van-nav-bar__title {
    font-size: 1.0625rem !important;
    font-weight: 500 !important;
    color: #FFF !important;
}

::v-deep .van-nav-bar {
    background-color: var(--themeBaseColor);
    border-bottom: 1px solid var(--themeBaseColor) !important;
}

.video-popularize-award {
    position: relative;

    .no-buy {
        height: 18.125rem;
        background: #FFFFFF;
        border-radius: .5rem;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            margin: 0;
            width: 7.1875rem;
        }

        .text {
            font-weight: 400;
            font-size: .8125rem;
            color: #6E6E79;
            margin-top: .7188rem;
        }
    }

    .list {
        padding: 0 .75rem .9375rem;
    }

    .item-text {
        font-weight: normal;
        font-size: .8125rem;
        color: #818181;
        text-align: left;
        line-height: 1;
        margin-bottom: .75rem;
    }

    .item-text:last-child {
        margin-bottom: 0;
    }

    .line {
        height: 1px;
        background-color: #F0F0F1;
        margin: .7813rem auto .9375rem;
    }

    .detail {
        font-weight: 500;
        font-size: .875rem;
        color: #F15353;
        flex-shrink: 0;
    }

    .item-title {
        font-weight: bold;
        font-size: .9375rem;
        text-align: left;
        color: #00001C;
        margin-right: .75rem;
    }

    .list-item {
        margin-bottom: .9375rem;
        background-color: #fff;
        border-radius: .5rem;
        padding: 1.0938rem .75rem .75rem;

    }

    .text-css {
        font-weight: normal;
        font-size: .75rem;
        color: #6E6E79;
    }

    .title {
        text-align: left;
        font-weight: 500;
        font-size: .875rem;
        color: #00001C;
        margin: .9375rem 1.0625rem;
    }

    .number {
        font-weight: bold;
        font-size: .9375rem;
        color: #00001C;
    }

    .tips-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #FFFFFF;
        border-radius: .5rem;
        height: 4.4063rem;
        margin: 0 .75rem;
    }

    .head {
        display: flex;
        align-items: center;
        padding-left: 1.0625rem;
        padding-top: .875rem;
        padding-bottom: 1.25rem;

        img {
            width: 3.4375rem;
            height: 3.4375rem;
            background: #737373;
            margin: 0;
            border-radius: 50%;
        }
    }

    .head-right {
        margin-left: .5313rem;
    }

    .nick-name {
        font-size: 1rem;
        color: #FFFFFF;
        font-weight: bold;
        text-align: left;
    }

    .level {
        padding: 0 .5rem;
        height: 1.25rem;
        line-height: 1.25rem;
        font-weight: normal;
        font-size: .6875rem;
        text-align: left;
        color: #FFFFFF;
        border-radius: .625rem;
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.1);

    }

    .bg-linear {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 11.25rem;
        background: linear-gradient(180deg, var(--themeBaseColor) 80%, #F5F5F5 100%);
        border-radius: 0rem 0rem 0rem 0rem;
        z-index: -1;
    }
}
</style>